<template>
  <div class="" style="padding: 2px 5px">
    <el-tabs v-model="activeName" type="">
      <el-tab-pane label="属性" name="first">
        <!-- 通用 -->
        <!-- 位置尺寸 -->
        <posizeoption />

        <!-- 样式 -->
        <!-- <styleoption /> -->
        <div
          v-if="activeitem.name == '文字组件'"
          class="fwwcc"
          style="padding: 3px"
        >
          <component :is="'styleoption'" />
        </div>

        <!-- datav组件 -->
        <div
          v-if="activeitem.name == '边框组件' || activeitem.name == '装饰组件'"
          class="fwwcc"
          style="padding: 3px"
        >
          <component :is="'datavoption'" />
        </div>

        <!-- 图表组件 -->
        <div
          v-if="activeitem.name == '图表组件'"
          class="fwwcc"
          style="padding: 3px"
        >
          <component :is="'chartoption'" />
        </div>

        <!-- 文字组件 -->
        <div
          v-if="activeitem.name == '文字组件'"
          class="fwwcc"
          style="padding: 3px"
        >
          <!-- <component :is="'textoption'" /> -->
          <textoption />
        </div>

        <!-- 图片组件 -->
        <div
          v-if="activeitem.name == '图片组件'"
          class="fwwcc"
          style="padding: 3px"
        >
          <component :is="'imgoption'" />
        </div>

        <div v-if="activeitem == ''">
          ctrl加鼠标左键拖动画布；<br />
          ctrl加鼠标滚轮缩放画布；
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据源" name="second">
        <shujuyuan></shujuyuan>
      </el-tab-pane>
      <el-tab-pane label="详细配置" name="third">角色管理</el-tab-pane>
    </el-tabs>
    <!-- <div class="fwwcc">属性列表</div> -->
  </div>
</template>
<script>
import { mapState } from "vuex";

import posizeoption from "./comoption/common/posize.vue";
import styleoption from "./comoption/common/style.vue";

import imgoption from "./comoption/imgoption.vue";
import textoption from "./comoption/textoption.vue";
import datavoption from "./comoption/datav";
import chartoption from "./comoption/chartoption";

import shujuyuan from "./shujuyuan";

export default {
  components: {
    datavoption,
    shujuyuan,
    chartoption,
    posizeoption,
    imgoption,
    textoption,
    styleoption,
  },
  data() {
    return {
      bbb: [],
      activeitem: '',
      activeName: "first",
    };
  },
  watch: {
    // "$store.state.editer.editercomlist": {
    //   handler: function (n, o) {
    //     console.log("999999999999");
    //     n.map((item) => {
    //       if (item.active) {
    //         this.bbb = Object.keys(item);
    //         this.activeitem = item;
    //       }
    //     });
    //   },
    // },
    // 'accc': {
    //   handler: function (n, o) {
    //     // this.bbb = Object.keys(this.$store.state.editer.editercomlist[n].item);
    //     // this.activeitem = this.$store.state.editer.editercomlist[n];
    //   }
    // },

    "$store.state.editer.editeractived": {
      handler: function (n, o) {
        this.bbb = Object.keys(n);
        this.activeitem = n;
        console.log(this.activeitem);
      },
    },
  },
  computed: {
    accc() {
      for (
        let i = 0, l = this.$store.state.editer.editercomlist.length;
        i < l;
        i++
      ) {
        let rect = this.$store.state.editer.editercomlist[i];

        if (rect.active) {
          return i;
        }
      }
      return null;
    },
  },
  mounted() {},
  methods: {
    change(e) {
      // this.$forceUpdate();
    },
  },
};
</script>
<style lang='scss' scoped>
</style>